<template>
  <section class="h100 gamepay-panel">
    <van-row class="header-panel">
      {{ gameName }}
    </van-row>

    <van-row class="pay-content">
      <van-row class="goods-panel">
        <van-row class="item">
          <van-row class="name">商品名称:</van-row>
          <van-row class="content">{{ productName }}</van-row>
        </van-row>
        <van-row class="item">
          <van-row class="name">订单金额:</van-row>
          <van-row class="content"><b class="red">￥{{ orderMoneyYuan }}</b></van-row>
        </van-row>
        <van-row class="item" v-if="saleRatio!==100&&saleRatio!==10">
          <van-row class="name">折扣优惠:</van-row>
          <van-row class="content">
            <van-row style="display: flex;align-items: center">
              <span class="red">-￥{{ saleMoney }}&nbsp;</span>
              <van-tag mark type="primary" color="#f9054f" text-color="#fff">{{ saleRatioDes }}</van-tag>
            </van-row>
          </van-row>
        </van-row>
        <van-row class="item" v-if="couponListCount">
          <van-row class="name">优惠券:</van-row>
          <div class="content" @click="onCouponShow()">
            <template v-if="couponCheckID"><span class="red">-{{ decCouponMoney.toFixed(2) }}</span>
              <van-icon name="arrow"/>
            </template>
            <template v-else>有<span class="red">{{ couponListCount }}</span>张优惠券可用
              <van-icon name="arrow"/>
            </template>
          </div>
        </van-row>

        <van-row class="item" v-if="isShowWelfareCoin == 1 && this.userWelfareCoin > 0">
          <van-row class="name">使用福利币:</van-row>
          <div class="content" @click="onWelfareCoinShow()">
            <template v-if="decWelfareCoinMoneyFen"><span class="red">-￥{{ (decWelfareCoinMoneyFen / 100).toFixed(2) }}</span>
              <van-icon name="arrow"/>
            </template>
            <template v-else>共<span class="red">{{ userWelfareCoin }}</span>币可用
              <van-icon name="arrow"/>
            </template>
          </div>
        </van-row>

      </van-row>
      <van-row class="pay-way">
        <van-row class="title">支付方式:</van-row>
        <van-row class="list">
          <div class="item" @click="onPayWayCheck('zhifubao')">
            <van-row class="name"><img :src="require('../../assets/images/icon/aipay.png')"/>支付宝支付{{ zfbDes }}</van-row>
            <van-row class="checked">
              <img
                  :src="payWayCode==='zhifubao'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

          <div class="item" @click="onPayWayCheck('weixin')">
            <van-row class="name"><img :src="require('../../assets/images/icon/wechat.png')"/>微信支付</van-row>
            <van-row class="checked">
              <img
                  :src="payWayCode==='weixin'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

          <div class="item" @click="onPayWayCheck('zfb_saoma')" v-if="isShowSM==='2'">
            <van-row class="name"><img :src="require('../../assets/images/icon/zfbSM.png')"/>支付宝扫码</van-row>
            <van-row class="checked">
              <img
                  :src="payWayCode==='zfb_saoma'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

          <div class="item" @click="onPayWayCheck('wx_saoma')" v-if="isShowSM==='2'">
            <van-row class="name"><img :src="require('../../assets/images/icon/wxSM.png')"/>微信扫码</van-row>
            <van-row class="checked">
              <img
                  :src="payWayCode==='wx_saoma'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

          <div class="item" @click="onPayWayCheck('platform_coin')" v-if="isShowPlatformCoin==='1'">
            <van-row class="name"><img :src="require('../../assets/images/icon/purse.png')"/>平台币支付</van-row>
            <van-row class="checked">
              <template>余额: {{ Math.round(userPlatformCoin * 100) }}</template>
              <img
                  :src="payWayCode==='platform_coin'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>

          <div class="item" @click="onPayWayCheck('coin')" v-if="!couponCheckID&&saleRatio===10&&isShowGameCoin==='1'">
            <van-row class="name"><img :src="require('../../assets/images/icon/balance.png')"/>游戏币支付</van-row>
            <van-row class="checked">
              <template>余额:￥{{ userGameCoin }}</template>
              <img
                  :src="payWayCode==='coin'?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>
        </van-row>
      </van-row>
    </van-row>

    <van-row class="pay-footer">
      <div class="form-btns" @click="doGamePay()">立即支付
        {{ payWayCode === 'platform_coin' ? payMoneyYuan * 100 + '平台币（￥' + payMoneyYuan + '）' : '￥' + payMoneyYuan }}
      </div>
      <div v-if="payWayCode === 'platform_coin'" style="width: 100%;text-align: center;padding-top:10px"><span style="color:red">*</span>支付比例：1元=100平台币</div>
    </van-row>

    <!-- 选择优惠劵 -->
    <van-popup
        v-model="couponPopUp"
        closeable
        position="bottom"
        :style="{height:'100%'}" @click-close-icon="onCouponCancel()">

      <van-row class="popup-pnael">
        <van-row class="header">可用优惠券</van-row>
        <van-row class="discount-list">
          <div class="item" v-for="(item,index) in couponListData" :key="index"
               @click="onCouponCheck(index,item['useId'])">
            <van-row class="panel">
              <van-row class="top">
                <van-row class="money"><span>¥</span>{{ item['moneyYuan'] }}</van-row>
                <van-row class="content">
                  <p>{{ item['title'] }}</p>
                  <p>满{{ item['orderDesYuan'] }}可用</p>
                </van-row>
              </van-row>
              <van-row class="date">{{ item['validDes'] }}</van-row>
            </van-row>
            <van-row class="checked">
              <img
                  :src="couponCheckID===item['useId']?require('../../assets/images/icon/checked.png'):require('../../assets/images/icon/check.png')"/>
            </van-row>
          </div>
        </van-row>
        <van-row class="pay-footer" v-if="couponCheckID">
          <div class="form-btns" @click.stop="onCouponSubmit()">确定使用</div>
        </van-row>
      </van-row>
    </van-popup>

    <!-- 选择福利币 -->
    <van-popup
        v-model="welfareCoinPopUp"
        closeable
        position="bottom"
        :style="{height:'100%'}" @click-close-icon="onWelfareCoinCancel()">

      <van-row class="popup-pnael">
        <van-row class="header">可用福利币</van-row>

        <van-row class="discount-list">
          <van-row  style="display:flex;align-items: center">
            <van-col span="9">
              <p>已选择<span class="red">{{decWelfareCoinMoneyFen}}</span>福利币</p>
              <p>可抵扣<span class="red">￥{{ decWelfareCoinMoneyFen / 100 }}</span>元</p>
            </van-col>
            <van-col span="10" style="text-align: right">
              <van-stepper v-model="decWelfareCoinMoneyFen" min="0" :max="maxWcMoneyFen" input-width="55px"
                          step="100" integer/>
            </van-col>
            <van-col span="5" style="text-align: right">
              <van-button icon="delete" type="default" size="mini" round @click="decWelfareCoinMoneyFen = 0">清除
              </van-button>
            </van-col>

          </van-row>
        </van-row>
        <van-row class="pay-footer" v-if="decWelfareCoinMoneyFen">
          <div class="form-btns" @click.stop="onWelfareCoinSubmit()">确定使用</div>
        </van-row>
      </van-row>
    </van-popup>

    <!--  支付弹框  -->
    <van-dialog v-model="payPopup" show-cancel-button @confirm="onPaySubmit()">
      <div class="pay-change" @click="payPopup=false">
        <van-icon name="arrow-left"/>
        其他支付
      </div>
      <van-row class="pay-detail">
        <p>立即支付</p>
        <p class="money">
          {{ payWayCode === 'platform_coin' ? payMoneyYuan * 100 + '平台币' : '￥' + payMoneyYuan }}
        </p>
      </van-row>
    </van-dialog>
  </section>
</template>

<script>
import {BRStorage} from "../../utils/brStorage";

export default {
  data() {
    return {
      initQuery: '',

      gameName: '游戏名称',
      productName: '商品名称',
      zfbDes: '',
      isShowSM: 1,
      isShowPlatformCoin: 1,
      isShowGameCoin: 1,
      isShowWelfareCoin: 1,
      userPlatformCoin: 0.00,
      userWelfareCoin: 0.00,
      userGameCoin: 0.00,
      orderMoneyYuan: 0.00,//订单金额
      orderPayMoneyYuan: 0.00,//订单实际默认支付金额
      payMoneyYuan: 0.00,//支付显示金额-即实际支付金额

      payWayCode: "zhifubao",
      payPopup: false,

      couponListCount: 0,
      couponListData: null,
      couponPopUp: false,
      welfareCoinPopUp: false,
      couponCheckIndex: 0,
      couponCheckID: 0,
      decCouponMoney: 0.00,
      decWelfareCoinMoneyFen: 0.00,
      decWelfareCoinMoney: 0.00,

      saleRatio: 100,
      saleRatioDes: "10折",
      saleMoney: 0,
    }
  },
  computed: {
    totalDecMoney() {
      return this.decCouponMoney + this.decWelfareCoinMoney;//总扣除金额
    },
    maxWcMoneyFen(){
      let afterCouponMoney = (this.orderPayMoneyYuan - this.decCouponMoney) * 100;
      return Math.min(afterCouponMoney, this.userWelfareCoin);
    }
  },
  created() {
    this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      this.initQuery = this.$route.query;
      let fromNative = this.initQuery.native;
      let runRomSystem = this.initQuery.runRomSystem;
      let appId = this.initQuery.appId;
      let orderNum = this.initQuery.orderNum;
      let time = this.initQuery.time;
      let sign = this.initQuery.sign;
      if (this.BRIsSetString(runRomSystem)) {
        BRStorage.setStorage(BRStorage.KeyRunRomSystem(), runRomSystem);
      }
      let params = {
        appId: appId,
        orderNum: orderNum,
        time: time,
        sign: sign,
      }
      this.$http(window.config.payPhoneApi + '/game/center_init', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
        } else {
          let resData = res.data;
          this.gameName = resData['gameName'];
          this.productName = resData['productName'];
          this.zfbDes = resData['zfbDes'];
          this.isShowSM = resData['isShowSM'];
          this.isShowPlatformCoin = resData['isShowPlatformCoin'];
          this.isShowGameCoin = resData['isShowGameCoin'];
          this.isShowWelfareCoin = resData['isShowWelfareCoin'];

          this.orderMoneyYuan = resData['orderMoneyYuan'];
          this.orderPayMoneyYuan = resData['orderPayMoneyYuan'];
          this.payMoneyYuan = resData['orderPayMoneyYuan'];
          this.userPlatformCoin = resData['platformCoin'];
          this.userWelfareCoin = resData['welfareCoin'];
          this.userGameCoin = resData['gameCoin'];
          this.saleRatio = resData['saleRatio'];
          this.saleRatioDes = resData['saleRatioDes'];
          this.saleMoney = resData['saleMoney'];

          this.couponListCount = resData['couponListCount'];
          this.couponListData = resData['couponListData'];
        }
      });
    },

    //选择支付方式
    onPayWayCheck(payWayCode) {
      this.payWayCode = payWayCode;
    },


    //优惠券选择
    onCouponShow() {
      this.couponPopUp = true;
    },
    //优惠券选择
    onCouponCheck(index, id) {
      this.couponCheckIndex = index;
      this.couponCheckID = id;
    },
    //优惠券确认
    onCouponSubmit() {
      this.decCouponMoney = this.couponListData[this.couponCheckIndex]['moneyYuan'];
      this.couponPopUp = false;
      this.updateOrderPayMoney();
    },
    //优惠券取消
    onCouponCancel() {
      this.couponCheckIndex = null;
      this.couponCheckID = 0;
      this.decCouponMoney = 0;
      this.updateOrderPayMoney();
    },

    //福利币抵扣选择
    onWelfareCoinShow(){
      this.welfareCoinPopUp = true;
      this.decWelfareCoinMoneyFen = this.userWelfareCoin;
    },

    //福利币取消
    onWelfareCoinCancel(){
      this.welfareCoinPopUp = false;
      this.decWelfareCoinMoneyFen = 0
      this.decWelfareCoinMoney = 0
      this.updateOrderPayMoney();
    },

    //福利币抵扣确认
    onWelfareCoinSubmit() {
      this.welfareCoinPopUp = false;
      this.decWelfareCoinMoney = this.numberToFixed(this.decWelfareCoinMoneyFen / 100)
      this.updateOrderPayMoney();
    },

    //更新为最终支付金额
    updateOrderPayMoney() {
      this.payMoneyYuan = this.orderPayMoneyYuan - this.totalDecMoney;
      if (this.payMoneyYuan <= 0) {
        this.payMoneyYuan = 0;
      }
      this.payMoneyYuan = this.payMoneyYuan.toFixed(2);
    },

    //立即支付
    doGamePay() {
      let payMoneyFen = this.payMoneyYuan * 100;
      if (!this.payWayCode) {
        this.BRToast("请选择支付方式");
        return;
      }
      switch (this.payWayCode) {
        case "platform_coin":
          if (this.userPlatformCoin * 100 < payMoneyFen) {
            this.BRToast("平台币余额不足，请选择其他支付方式");
            return;
          }
          break;
        case "coin":
          if (this.couponCheckID) {
            this.BRToast("请选择支付方式");
            return;
          }
          if (this.userGameCoin * 100 < payMoneyFen) {
            this.BRToast("游戏币余额不足，请选择其他支付方式");
            return;
          }
          break;
      }
      this.payPopup = true;
    },

    numberToFixed(num) {
      return parseFloat(num.toFixed(2))
    },

    //支付确认
    onPaySubmit() {
      let appId = this.initQuery.appId;
      let orderNum = this.initQuery.orderNum;
      let time = this.initQuery.time;
      let sign = this.initQuery.sign;

      let params = {
        appId: appId,
        orderNum: orderNum,
        time: time,
        sign: sign,
        payWayCode: this.payWayCode,
        couponCheckID: this.couponCheckID,
        decWelfareCoinMoneyFen: this.decWelfareCoinMoneyFen,
        saleRatio: this.saleRatio,
        payMoneyYuan: this.payMoneyYuan,
      }
      this.$http(window.config.payPhoneApi + '/game/order', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
          return;
        }
        let resData = res.data;
        window.location.href = resData['redUrl'];
      });
    }

  }
};
</script>


<style lang='less'>
@import "../../assets/css/gamePay/index.less";
</style>
